<template>
  <div class="container">
    <div class="header">
      <img src="@/assets/menu/pc_new_logo.png" alt="">
    </div>
    <div class="border">
      <div>
        <span>用户登录</span>
        <div>
          <input class="input" name="phonenumber" placeholder="手机号" type="phonenumber" v-model.trim="params.phone" maxlength="11">
        </div>
        <div>
          <input class="input" name="password" placeholder="密码" type="password" v-model.trim="params.password">
        </div>
        <div class="login" @click="Login">登录</div>
        <div class="enroll">没有账号？
          <router-link to="/anroll">快来免费注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getLoginAPI } from '@/api/getLoginAPI'
export default {
  name: 'HouseRentUserLogin',

  data() {
    return {
      params: {
        phone: '',
        password: ''
      }
    }
  },

  methods: {
    async Login() {
      const { data: res } = await getLoginAPI({
        phone: this.params.phone,
        password: this.params.password
      })
      if (res.code === 20051) {
        localStorage.setItem('userRole', res.data.userRole)
        localStorage.setItem('phone', this.params.phone)
        localStorage.setItem('id', res.data.id)
        localStorage.setItem('idcard', res.data.idcard)
        localStorage.setItem('uname', res.data.uname)
        localStorage.setItem('username', res.data.username)
        localStorage.setItem('password', res.data.password)
        localStorage.setItem('state', res.data.state)
        localStorage.setItem('token', res.data.token)
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        this.$router.go(-1)
      } else {
        this.$message.error('登录失败，请重新输入手机号或密码')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/menu/minsu003.jpg');
  background-size: 100% 100%;
}
.header {
  display: flex;
  justify-content: space-around;
  background: #ffffff;
  border-bottom: 5px solid #ff9180;
  width: 100%;
  height: 60px;
  z-index: 1;
}
.border {
  margin: auto;
  margin-top: 100px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40em;
  height: 30em;
}
.border span {
  font-weight: 600;
  padding: auto;
  background-color: #ff9180;
  color: #fff;
}

.input {
  margin: 10px 0 10px 0;
  width: 300px;
  background-color: #f5f5f5;
  color: #242424;
  padding: 0.15rem 0.5rem;
  min-height: 40px;
  border-radius: 4px;
  outline: none;
  border: none;
  line-height: 1.15;
  box-shadow: 0px 10px 20px -18px;
}

input:focus {
  border-bottom: 2px solid #5b5fc7;
  border-radius: 4px 4px 2px 2px;
}

input:hover {
  outline: 1px solid lightgrey;
}
.login {
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  color: #fff;
  background-color: #ff9180;
}
.enroll {
  margin-top: 5px;
  color: #ff9180;
}
.enroll a {
  text-decoration: none;
  color: #ff9180;
}
</style>
